<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-04-03 22:36:23
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-04-06 22:06:18
-->
<template>
  <div class="container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="修改密码" name="first">
        <el-form :model="password" style="width: 30%">
          <el-form-item label="原密码:">
            <el-input
              v-model="password.oldPass"
              placeholder="请输入原密码..."
              type="password"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码:">
            <el-input
              v-model="password.newPass"
              placeholder="请输入新密码..."
              type="password"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="info" @click="reset">重置</el-button>
            <el-button type="primary" @click="saveChange">确定修改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改头像" name="second">
        点击方框选择头像
        <el-row>
          <el-col :span="5">
            <el-upload
              class="avatar-uploader"
              action="http://127.0.0.1:8080/system/headImgUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
        </el-row>
        <el-button type="primary" @click="updateAvatar" disabled>确定修改</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { updateAvatar, updatePass } from "../../api/emsystem.js";
export default {
  data() {
    return {
      activeName: "first",
      password: {
        oldPass: "",
        newPass: "",
      },
      imageUrl: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      //res里面有后端发来存储地址
      //file里面是浏览器临时生成文件预览地址
      this.imageUrl = "http://" + res.data;
      console.log(res.data);
    },
    updateAvatar() {
      updateAvatar(this.imageUrl)
        .then((result) => {
          if (result.status == "200") {
            this.$message.success("修改头像成功");
            location.reload();
          }
        })
        .catch((err) => {});
    },
    reset() {
      this.password = {};
    },
    saveChange() {
      updatePass(this.password)
        .then((result) => {
          if (result.status == "200") {
            this.$message.success("密码修改成功！");
          } else {
            this.$message.error(result.message);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
